<html>

  <head>
  <title>Simple Map</title>
  <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
  <meta charset='utf-8'> 
  <style> html, body, #map-canvas {height: 1px; margin: 0px; padding: 0px } </style>
  <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
  <script>
    var map;
    var pins = new Array();
    var userMarker = null;

    function initialize() {
      var height = Math.max(document.documentElement.clientHeight, window.innerHeight );
      document.getElementById('map-canvas').style.height = height;

      var mapOptions = { zoom: 3, center: new google.maps.LatLng(0,0) };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

//      navigator.geolocation.watchPosition(
//        function(pos) {
//          var crd = pos.coords;
//          if(userMarker == null) {
//            userMarker = new google.maps.Marker({
//              icon: pinSymbol("#9999FF"),
//              position: new google.maps.LatLng(crd.latitude,crd.longitude),
//              map: map,
//              title: "Você está aqui!"
//            });
//            map.setZoom(15);
//          }
//          moveTo(crd.latitude,crd.longitude);
//          userMarker.position = new google.maps.LatLng(crd.latitude,crd.longitude);
//          reqBack("newPos:"+crd.latitude+","+crd.longitude);
//        }
//      );

      requestPins();
    }

    function pinSymbol(color) {
      return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
      };
    }


//    function pinSymbol(color) {
//      return 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2%7C'+color+'%7C000000';
//    }

    function moveTo(lat,lon) {
      map.setCenter(new google.maps.LatLng(lat,lon));
    }

    function addPin(pinId,lat,lon,color,titleText) {
      var mapMarker = new google.maps.Marker({
        icon: pinSymbol(color),
        position: new google.maps.LatLng(lat,lon),
        map: map,
        title: titleText
      });

      pins[pins.length] = {id: pinId, marker: mapMarker};

      google.maps.event.addListener(mapMarker, 'click', function() {
        map.setCenter(mapMarker.getPosition());
        setTimeout(function(){reqBack("markerClicked:"+pinId+","+titleText);},1);
      });

      return mapMarker;
    }

    function reqBack(msg) {
      var xmlhttp=new XMLHttpRequest();
      xmlhttp.open('GET','/'+btoa(msg),false);
      xmlhttp.send();
    }

    function requestPins() {
      var xmlhttp=new XMLHttpRequest();
      xmlhttp.open('GET','/PINS',false);
      xmlhttp.send();

      var pins = eval('('+xmlhttp.responseText+')');
      var i;
      for(i=0; i<pins.length; i++) {
        addPin(pins[i].id,pins[i].lat,pins[i].lon,pins[i].color,pins[i].label);
      }
    }

    function requestGPSPosition() {
      var xmlhttp=new XMLHttpRequest();
      xmlhttp.open('GET','/PINS',false);
      xmlhttp.send();

      setTimeout(function(){requestGPSPosition();}, 3000);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

//    requestGPSPosition();
  </script>

  </head>
  <body>
    <div id='map-canvas'></div>
  </body>

</html>

